let BASE_URL = "https://service-kem9ftt4-1302324326.gz.apigw.tencentcs.com"
let API = {
    SEARCH: BASE_URL + '/cloudsearch',
    GETSONG: BASE_URL + '/song/url/v1'
}
let page = {
    limit: 30,
    offset: 1,
    total: 0
}

// 用于将数组里面每个对象的作者提取出来
let formatArtists = array => array.map(artist => artist.name).join("/")
//时长转换
function time(millisecond) {
    //取整计算分钟
        let number = parseInt(millisecond / 1000 / 60)
        //取整计算秒钟
        let number1 = parseInt(millisecond / 1000 % 60)
        //判断如果分钟小于10，计算的分钟就等于它自己;字符串0拼接计算的分钟
            if(number < 10) number = '0' +number
            //判断如果秒钟大于10，计算的秒钟就等于它自己;
            if(number1 < 10) number1 ='0' +number1;
            console.log(number1);
            //计算的分钟和秒钟用数组装起来
            let arr = [number,number1]
            //拼接数组把分钟和秒钟拼接起来形成时间模式
            return arr.join(':')
}

// 搜索歌曲
$("#send").click(async () => {
    let value = $('#keywords').val();
    if (!value) return;
    try {
        let data = await $ajax({
            url: API.SEARCH,
            method: 'GET',
            data: {
                keywords: value,
                limit: page.limit,
                offset: (page.offset - 1) * page.limit,
            },
            isJson: true,
        })
        if (data.code === 200) {
            // 先将列表中的数据清空，防止上一次搜索结果保留下来
            $("tbody").html("");

            // 如果遇到没有版权的作者，可能 songs 为空
            let songs = data.result.songs;
            console.log(songs);
            if (!songs) return;

            // 将歌曲总数进行记录
            page.total = data.result.songCount;

            songs.forEach(song => {
                console.log(songs);
                $("tbody").append(`<tr data-id="${song.id}">
                <td>${song.name}</td>
                <td>${formatArtists(song.ar)}</td>
                <td>${song.al.name}</td>
                <td>${time(song.dt)}</td>
            </tr>`)
            })
            console.log(songs);

        }
    } catch (err) {
        alert(err)
    }
})

// 播放歌曲
$("tbody").click(async  e => {
    let songId = e.target.parentNode.dataset.id;
    if (!songId) return alert("该歌曲暂无法播放");

    try{
        let data = await $ajax({
            url: API.GETSONG + `?t=${+new Date()}`,
            method: 'POST',
            data: {
                id: songId,
                level: "standard"
            },
            isJson: true,
        })
        console.log(data);
        if (data.code === 200) {
            $("#player").prop("src", data.data[0].url)
        }
    }catch(err){
        alert(err)
    }
})

// 下一页
$("#next").click(async  ()  => {
    // 如果点击后，发现当前的页码是最后一页，则不允许执行下去
    let maxPage = Math.ceil(page.total / page.limit);
    if (page.offset === maxPage) return alert("已经是最后一页了！！！");

    page.offset++;

    let value = $('#keywords').val();
    if (!value) return;

    try{
        let data = await $ajax({
            url: API.SEARCH,
            method: 'GET',
            data: {
            keywords: value,
            limit: page.limit,
            offset: (page.offset - 1) * page.limit,
        },
        isJson: true,
        })
            // 先将列表中的数据清空，防止上一次搜索结果保留下来
            $("tbody").html("");

            // 如果遇到没有版权的作者，可能 songs 为空
            let songs = data.result.songs;
            if (!songs) return;

            songs.forEach(song => {
                $("tbody").append(`<tr data-id="${song.id}">
                    <td>${song.name}</td>
                    <td>${formatArtists(song.ar)}</td>
                    <td>${song.al.name}</td>
                    <td>${time(song.dt)}</td>
                </tr>`)
            })
        
    }catch(err){
        alert(err)
    }
})
//上一页
$("#prev").click(async () => {
    // 如果点击后，发现当前的页码是第一页，则不允许执行下去
    if (page.offset <= 1) return alert("已经是第一页了！！！");

    page.offset--;

    let value = $('#keywords').val();
    if (!value) return;

    try{
        let data = await $ajax({
            url: API.SEARCH,
            method: 'GET',
        data: {
            keywords: value,
            limit: page.limit,
            offset: (page.offset - 1) * page.limit,
        },
        isJson: true,
        })
            // 先将列表中的数据清空，防止上一次搜索结果保留下来
            $("tbody").html("");

            // 如果遇到没有版权的作者，可能 songs 为空
            let songs = data.result.songs;
            if (!songs) return; 

            songs.forEach(song => {
                $("tbody").append(`<tr data-id="${song.id}">
                    <td>${song.name}</td>
                    <td>${formatArtists(song.ar)}</td>
                    <td>${song.al.name}</td>
                    <td>${time(song.dt)}</td>
                </tr>`)
            })
    }catch(err){
        alert(err)
    }
})




// 封装的 ajax
function serialize(data) {
    let result = "";
    for (let key in data) {
        result += `${key}=${data[key]}&`
    }
    return result.slice(0, -1);
}

function $ajax(options = {}) {
        let {
            url,
            method,
            data = {},
            isJson = true,
        } = options;

    return  new Promise((resolve, reject) =>{
            let xhr = new XMLHttpRequest();
            xhr.responseType = "json";

            // 判断该次请求是否为 GET 请求，如果是，则需要将参数拼接到 url 上
            if (method.toLowerCase() === 'get') {
                xhr.open('GET', `${url}?${serialize(data)}`)
                xhr.send();
            } else {
                // 由于请求方式还存在 PUT、DELETE，这些方式的数据同样要携带到请求体上
                xhr.open(method, url);
    
                // 判断请求体是否需要以 JSON 格式发送
                if (isJson) {
                    xhr.setRequestHeader("Content-Type", "application/json;charset=utf-8");
                    xhr.send(JSON.stringify(data))
                } else {
                    xhr.setRequestHeader("Content-Type", "application/x-www-urlencoded;charset=utf-8");
                    xhr.send(serialize(data));
                }
            }
    
            xhr.addEventListener("load", function () {
                if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {
                    resolve(xhr.response)
                } else {
                    reject(xhr.response)
                }
            })
    })
}